<template>
  <div class="invoice">
    <div class="wrapper">
      <div class="wrapList">
        <div class="item acea-row row-between-wrapper">
          <div class="picTxt acea-row row-between-wrapper">
            <div class="pictrue">
              <div class="pictrue">
                <img :src="image" />
              </div>
            </div>
            <div class="text">
              <!-- <div class="name line1">订单编号
                <span>1233333333333</span>
              </div> -->
              <div>
                开票金额
                <span class="setRed"
                  ><font style="font-size:0.24rem;">￥</font
                  ><font style="font-size:0.4rem;">{{ firstprice }}</font>
                  <font style="font-size:0.24rem;">{{
                    `${price ? "." : ""}${secondprice}`
                  }}</font></span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="tipTitle">发票详情</div>
      <div class="item acea-row row-between-wrapper">
        <div>发票类型</div>
        <div class="input">
          <span>电子发票</span>
        </div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>抬头类型</div>
        <div class="input selectItem">
          <span>
            <img
              v-show="personType == 1"
              class="selectImg setMargin"
              src="../../assets/images/checked.png"
              alt=""
            />
            <img
              v-show="personType == 2"
              @click="
                (personType = 1), (invoiceRise = ''), (invoiceNumber = '')
              "
              class="selectImg setMargin"
              src="../../assets/images/unchecked.png"
              alt=""
            />
            个人
          </span>
          <span style="margin-left:1.28rem;">
            <img
              v-show="personType == 1"
              @click="personType = 2"
              class="selectImg setMargin"
              src="../../assets/images/unchecked.png"
              alt=""
            />
            <img
              v-show="personType == 2"
              class="selectImg setMargin"
              src="../../assets/images/checked.png"
              alt=""
            />
            企业
          </span>
        </div>
      </div>
      <div class="item acea-row row-between-wrapper" v-show="personType == 2">
        <div>发票抬头</div>
        <div class="input">
          <input
            :class="{ showred: showred1 == 1 }"
            type="text"
            v-model="invoiceRise"
            class="id"
            placeholder="抬头名称"
          />
        </div>
      </div>
      <div class="item acea-row row-between-wrapper" v-show="personType == 2">
        <div>发票税号</div>
        <div class="input">
          <input
            :class="{ showred: showred2 == 1 }"
            type="text"
            v-model="invoiceNumber"
            class="id"
            placeholder="纳税人识别号"
          />
        </div>
      </div>
    </div>
    <div class="list">
      <div class="tipTitle">收票人信息</div>
      <div class="item acea-row row-between-wrapper" v-show="personType == 1">
        <div>收票人信息<span class="mastFall">*</span></div>
        <div class="input">
          <span>{{ name }}</span>
        </div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>收票人手机<span class="mastFall">*</span></div>
        <div class="input">
          <span>{{ mobilePhone | hide }}</span>
        </div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>收票人邮箱<span class="mastFall">*</span></div>
        <div class="input">
          <input
            :class="{ showred: showred3 == 1 }"
            type="text"
            v-model="email"
            class="id"
            placeholder="用来接收电子发票邮件"
          />
        </div>
      </div>
    </div>
    <div class="list">
      <div class="tipTitle">
        发票内容<span class="titleDetail" style="margin-left:0.1rem;"
          >发票内容选项已根据税法调整，具体以展示为准</span
        >
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>商品明细</div>
        <div class="input">
          <img
            v-show="invoiceType == 2"
            @click="invoiceType = 1"
            class="selectImg"
            src="../../assets/images/unchecked.png"
            alt=""
          />
          <img
            v-show="invoiceType == 1"
            class="selectImg"
            src="../../assets/images/checked.png"
            alt=""
          />
        </div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>商品类别</div>
        <div class="input">
          <img
            v-show="invoiceType == 1"
            @click="invoiceType = 2"
            class="selectImg"
            src="../../assets/images/unchecked.png"
            alt=""
          />
          <img
            v-show="invoiceType == 2"
            class="selectImg"
            src="../../assets/images/checked.png"
            alt=""
          />
        </div>
      </div>
      <div v-show="invoiceType == 2" class="tipTitle titleDetail">
        发票内容将本单商品所属类别（电器电子产品及配件）及价格信息，发票金额为实际支付金额。
      </div>
      <div v-show="invoiceType == 1" class="tipTitle titleDetail">
        发票内容将显示详细商品名称与价格信息，发票金额为实际支付金额。
      </div>
    </div>
    <div class="modifyBnt" @click="submit">确定</div>
  </div>
</template>
<script>
// import { mapGetters } from "vuex";
// import { VUE_APP_API_URL } from "@utils";
// // import VueCoreImageUpload from "vue-core-image-upload";
// import { switchH5Login, getUser } from "@api/user";
// import { clearAuthStatus } from "@libs/wechat";
// import cookie from "@utils/store/cookie";
// import store from "@/store";
// import dayjs from "dayjs";

export default {
  name: "invoice",
  components: {},
  data: function() {
    return {
      id: "",
      firstprice: "",
      secondprice: "",
      showred1: "",
      showred2: "",
      showred3: "",
      //商品缩略图
      image: "",
      //订单金额
      price: "",
      //收票人信息
      name: "",
      //收票人手机
      mobilePhone: "",
      //发票回传信息
      invoiceRise: "", //发票抬头
      invoiceNumber: "", //发票税号
      email: "", //邮箱

      //抬头类型 1个人 2企业
      personType: 1,
      //发票内容类型 1商品明细 2商品类别
      invoiceType: 1
      // url: `${VUE_APP_API_URL}/upload/image`,
      // headers: {
      //   "Authori-zation": "Bearer " + this.$store.state.app.token
      // },
      // avatar: "",
      // isWeixin: false,
      // currentAccounts: 0,
      // switchUserInfo: [],
      // userIndex: 0
    };
  },
  watch: {},
  // computed: mapGetters(["userInfo"]),
  mounted: function() {
    let { name, price, image, mobile } = this.$route.query;
    let { id } = this.$route.params;
    // if(this.$route.query.info != undefined){
    //   let info = JSON.parse(this.$route.query.info);
    //   this.personType = info.personType;
    //   this.invoiceRise = info.invoiceRise;
    //   this.invoiceNumber = info.invoiceNumber;
    //   this.invoiceType = info.invoiceType;
    //   this.email = info.email;
    // }
    if (name != "undefined" && name != "" && name != "null") {
      this.name = name;
    }
    if (price != "undefined" && price != "" && price != "null") {
      this.price = price;
      this.firstprice = this.price.split(".")[0];
      this.secondprice = this.price.split(".")[1];
    }
    if (image != "undefined" && image != "" && image != "null") {
      this.image = image;
    }
    if (mobile != "undefined" && mobile != "" && mobile != "null") {
      this.mobilePhone = mobile;
    }
    if (id != "undefined" && id != "" && id != "null") {
      this.id = id;
    }
  },
  methods: {
    // switchAccounts: function(index) {
    //   let that = this;
    //   this.userIndex = index;
    //   let userInfo = this.switchUserInfo[this.userIndex];
    //   if (this.switchUserInfo.length <= 1) return true;
    //   if (userInfo === undefined)
    //     return this.$dialog.toast({ mes: "切换的账号不存在" });
    //   if (userInfo.user_type === "h5") {
    //     switchH5Login()
    //       .then(({ data }) => {
    //         that.$dialog.loading.close();
    //         const expires_time = dayjs(data.expires_time);
    //         store.commit("LOGIN", data.token, expires_time);
    //         that.$emit("changeswitch", false);
    //         location.reload();
    //       })
    //       .catch(err => {
    //         that.$dialog.loading.close();
    //         return that.$dialog.toast({ mes: err });
    //       });
    //   } else {
    //     cookie.set("loginType", "wechat", 60);
    //     this.$dialog.loading.close();
    //     this.$store.commit("LOGOUT");
    //     clearAuthStatus();
    //     this.$emit("changeswitch", false);
    //     location.reload();
    //   }
    // },
    // getUserInfo: function() {
    //   let that = this;
    //   getUser().then(res => {
    //     let switchUserInfo = res.data.switchUserInfo;
    //     for (let i = 0; i < switchUserInfo.length; i++) {
    //       if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
    //       if (
    //         !that.isWeixin &&
    //         switchUserInfo[i].user_type != "h5" &&
    //         switchUserInfo[i].phone === ""
    //       )
    //         switchUserInfo.splice(i, 1);
    //     }
    //     that.$set(this, "switchUserInfo", switchUserInfo);
    //   });
    // },
    // imageuploaded(res) {
    //   if (res.status !== 200)
    //     return this.$dialog.error(res.msg || "上传图片失败");
    //   if (this.switchUserInfo[this.userIndex] === undefined) return;
    //   this.$set(this.switchUserInfo[this.userIndex], "avatar", res.data.url);
    // },
    /**
     * javascript验证纳税人识别号格式
     * @param  taxId [纳税人识别号]
     * @return true格式正确，false格式错误
     */
    checkTaxId(taxId) {
      var regArr = [
          /^[\da-z]{10,15}$/i,
          /^\d{6}[\da-z]{10,12}$/i,
          /^[a-z]\d{6}[\da-z]{9,11}$/i,
          /^[a-z]{2}\d{6}[\da-z]{8,10}$/i,
          /^\d{14}[\dx][\da-z]{4,5}$/i,
          /^\d{17}[\dx][\da-z]{1,2}$/i,
          /^[a-z]\d{14}[\dx][\da-z]{3,4}$/i,
          /^[a-z]\d{17}[\dx][\da-z]{0,1}$/i,
          /^[\d]{6}[\da-z]{13,14}$/i
        ],
        j = regArr.length;
      for (var i = 0; i < j; i++) {
        if (regArr[i].test(taxId)) {
          return true;
        }
      }
      //纳税人识别号格式错误
      return false;
    },

    submit: function() {
      let reg1 = /^[\u4e00-\u9fa5]{2,20}$/; //发票抬头
      let reg2 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; //邮箱
      let { personType, invoiceType } = this;
      let { invoiceRise, invoiceNumber, email, id } = this;
      if (personType == 2) {
        if (invoiceRise == "") {
          this.showred1 = 1;
          return this.$dialog.toast({ mes: "请您填写发票对应信息" });
        } else if (!reg1.test(invoiceRise)) {
          return this.$dialog.toast({ mes: "您的抬头名称有误，请重新填写" });
        }
        if (invoiceNumber == "") {
          this.showred2 = 1;
          return this.$dialog.toast({ mes: "请您填写发票对应信息" });
        } else if (!this.checkTaxId(invoiceNumber)) {
          return this.$dialog.toast({
            mes: "您的纳税人识别号有误，请重新填写"
          });
        }
      }

      if (email == "") {
        this.showred3 = 1;
        return this.$dialog.toast({ mes: "请您填写发票对应信息" });
      } else if (!reg2.test(email)) {
        return this.$dialog.toast({ mes: "您的电子邮件格式有误，请重新填写" });
      }
      this.$router.replace(
        `/order/submit/${id}?invoiceRise=${invoiceRise}&invoiceNumber=${invoiceNumber}&email=${email}&personType=${personType}&invoiceType=${invoiceType}`
      );
    }
  },
  filters: {
    hide(val) {
      return val && val.substr(0, 3) + "****" + val.substr(7);
    }
  }
};
</script>
<style scoped>
.wrapItem {
  width: 100%;
}
.tipTitle {
  width: 100%;
  background: rgba(244, 244, 244, 1);
  padding: 0.2rem 0.3rem;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
}
.titleDetail {
  font-size: 0.2rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: rgba(0, 0, 0, 0.2);
}
.invoice .wrapper {
  background-color: #fff;
  padding: 0.34rem 0 0 0.3rem;
  width: 100%;
  height: 1.74rem;
}

.invoice .wrapper .wrapList {
  /* margin:0.34rem 0 0 0.3rem; */
}
.invoice .wrapper .wrapList .item {
  border-radius: 0.2rem;
  position: relative;
}
.invoice .wrapper .wrapList .item .picTxt {
  /* width:4.45rem; */
}
.invoice .wrapper .wrapList .item .picTxt .pictrue {
  width: 1.1rem;
  height: 1.1rem;
  position: relative;
}
.invoice .wrapper .wrapList .item .picTxt .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.16rem;
}
/* .invoice .wrapper .wrapList .item .picTxt .pictrue .alter{
  width:0.3rem;
  height:0.3rem;
  border-radius:50%;
  position:absolute;
  bottom:0;
  right:0;
  } */
.invoice .wrapper .wrapList .item .picTxt .text {
  /* width:3.25rem; */
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-left: 0.2rem;
}
.invoice .wrapper .wrapList .item .picTxt .text .name {
  /* width:100%;
  font-size:0.3rem;
  color:#282828; */
  margin-bottom: 0.12rem;
}
.invoice .wrapper .wrapList .item .picTxt .text span {
  /* font-size:0.24rem; */
  /* color:#999;
  margin-top:0.1rem; */
  margin-left: 0.22rem;
}
.picTxt .text span.setRed {
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(252, 64, 74, 1);
}
.mastFall {
  color: rgba(252, 64, 74, 1);
}
.invoice .wrapper .wrapList .item .bnt {
  font-size: 0.24rem;
  background-color: #fff;
  border-radius: 0.27rem;
  width: 1.4rem;
  height: 0.54rem;
  border: 0.02rem solid #e93323;
}
.invoice .wrapper .wrapList .item .currentBnt {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.26rem;
  background-color: rgba(233, 51, 35, 0.1);
  width: 1.4rem;
  height: 0.48rem;
  border-radius: 0 0.2rem 0 0.2rem;
}
.invoice .list {
  background-color: #fff;
}
.invoice .list .item {
  padding: 0.2rem 0.3rem 0.2rem 0;
  border-bottom: 1px solid #f2f2f2;
  margin-left: 0.3rem;
  font-size: 0.28rem;
  color: #282828;
}
.invoice .list .item .pictrue {
  width: 0.88rem;
  height: 0.88rem;
}
.invoice .list .item .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.invoice .list .item .input {
  width: 4.15rem;
  text-align: right;
  color: #868686;
}
.invoice .list .item .input input {
  color: #868686;
  text-align: right;
  width: 100%;
}
.invoice .list .item .input .id {
  width: 3.65rem;
}
.invoice .list .item .input .iconfont {
  font-size: 0.35rem;
  /* margin:1.28rem */
}
.invoice .list .item .input .iconfont.icon-xiangyou {
  font-size: 0.3rem;
  margin-left: 0.27rem;
}
.invoice .modifyBnt {
  position: fixed;
  bottom: 0;
  font-size: 0.3rem;
  color: #fff;
  width: 100%;
  /* height:0.9rem; */
  /* border-radius:0.5rem; */
  text-align: center;
  line-height: 1rem;
  /* margin:0.76rem auto 0 auto; */
  height: 1rem;
  background: rgba(255, 50, 62, 1);
}
.invoice .logOut {
  font-size: 0.32rem;
  text-align: center;
  width: 6.9rem;
  height: 0.9rem;
  border-radius: 0.45rem;
  margin: 0.3rem auto 0.7rem auto;
}
.invoice .selectImg {
  width: 0.32rem;
  height: 0.32rem;
}
.invoice .setMargin {
  margin-right: 0.2rem;
}
.showred::-webkit-input-placeholder {
  color: rgba(252, 64, 74, 1);
}
</style>
